<template>
<div>
<!-- 头部输入按钮 -->
  <div>
    <el-form :model="form">
      <!--      第一个输入框-->
      <div style="float: left;">
        <el-form-item label="菜单名称：" :label-width="formLabelWidth" style="width: 150px;">
          <el-input v-model="input"  size="small"  style="width: 180px; padding-right: 15px"></el-input>
        </el-form-item>
      </div>
      <!-- 三个按钮     -->
      <div style=" float: left;width: 330px;margin-top:3px ;margin-left: 130px ">
        <el-button type="primary" icon="el-icon-search" size="small" style="width: 80px;">查询</el-button>
        <el-button plain  size="small" style="width: 80px;margin-left: 10px">重置</el-button>
        <el-button type="primary"  size="small"  style="width: 80px;margin-left: 10px" @click="addDialog=true">添加</el-button>
      </div>
    </el-form>
  </div>

<!-- 表格数据 -->
  <div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :default-sort = "{prop: 'date', order: 'descending'}"
    >
      <el-table-column
        prop="id"
        label="序号"
        sortable
        width="75">
      </el-table-column>
      <el-table-column
        prop="caidan"
        label="菜单管理"
        sortable
        width="140">
      </el-table-column>
      <el-table-column
        prop="luyou"
        label="路由地址"
        sortable
        width="160">
      </el-table-column>
      <el-table-column
        prop="jiekou"
        label="接口地址"
        width="240">
      </el-table-column>
      <el-table-column
        prop="leixing"
        label="类型"
        width="120">
      </el-table-column>
      <el-table-column
        prop="paixu"
        label="排序"
        sortable
        width="80">
      </el-table-column>
      <el-table-column
        prop="beizhu"
        label="备注"
        width="150">
      </el-table-column>
      <el-table-column
        prop="caozuo"
        label="操作">
        <el-button type="primary" size="mini" @click="addDialog=true">添加</el-button>
        <el-button type="danger"  size="mini" style="margin-left: 10px" @click="deleteOne">删除</el-button>
        <el-button type="success" size="mini" @click="updateDialog=true" style="margin-left: 10px">修改</el-button>
      </el-table-column>
    </el-table>
  </div>

<!--  分页-->
  <div>
    <div style="float: right;margin-top: 20px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
    </div>
  </div>



<!-- 各个弹窗 -->
  <div>

    <!--添加弹窗-->
    <div>
      <el-dialog
        title="添加菜单"
        :visible.sync="addDialog"
        width="30%"
        :before-close="handleClose">
        <!--   类型 及  三个单选框     -->
        <div>
          <span style="margin-right: 25px">类型：</span>
            <el-radio-group v-model="radio" >
                      <!--      : label=“1”，表示label的值应为数字1     label=“1”，表示label的值应为字符串1      -->
              <el-radio :label="1"  @change="addmuLuShow">目录</el-radio>
              <el-radio :label="2"  @change="addcaiDanShow">菜单</el-radio>
              <el-radio :label="3"  @change="addanNiuShow">按钮</el-radio>
            </el-radio-group>
        </div>
<!--   根据类型不同而选择不同的模块-->
        <!--   目录模块   -->
        <div style="margin-top: 30px " v-show="addmulu" >
          <!--    el的form表单  -->
          <el-form :model="form">
            <!--   input菜单名称输入框   -->
            <div>
              <el-form-item label="*菜单名称：" :label-width="formLabelWidth" style="width: 150px;">
                <el-input v-model="input1"   style="width: 240px"></el-input>
              </el-form-item>
            </div>
            <!--   input路由输入框   -->
            <div>
              <el-form-item label="路由地址：" :label-width="formLabelWidth" style="width: 150px;">
                <el-input v-model="input2"   style="width: 240px"></el-input>
              </el-form-item>
            </div>
            <!--   计数器  排序   -->
            <div>
              <el-form-item label="排序：" :label-width="formLabelWidth" style="width: 150px;">
                <el-input-number v-model="num" @change="handleChange" :min="1"  style="width: 240px;"></el-input-number>
              </el-form-item>
            </div>
            <!--      -->
            <div>
              <el-form-item label="备注：" :label-width="formLabelWidth" style="width: 150px;">
                <el-input placeholder="请输入内容" type="textarea" v-model="form.desc" style="width: 240px;"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>

        <!--  菜单模块    -->
        <div v-show="addcaidan"  style="margin-top: 30px ">
          <el-form :model="form">
            <!--   input菜单名称输入框   -->
            <div>
              <el-form-item label="*菜单名称：" :label-width="formLabelWidth" style="width: 150px;">
                <el-input v-model="input1"   style="width: 240px"></el-input>
              </el-form-item>
            </div>
            <!--   input路由输入框   -->
            <div>
              <el-form-item label="路由地址：" :label-width="formLabelWidth" style="width: 150px;">
                <el-input v-model="input2"   style="width: 240px"></el-input>
              </el-form-item>
            </div>
            <!--   input接口输入框   -->
            <div>
              <el-form-item label="接口地址：" :label-width="formLabelWidth" style="width: 150px;">
                <el-input v-model="input3"   style="width: 240px"></el-input>
              </el-form-item>
            </div>
            <!--   计数器  排序   -->
            <div>
              <el-form-item label="排序：" :label-width="formLabelWidth" style="width: 150px;">
                <el-input-number v-model="num" @change="handleChange" :min="1"  style="width: 240px;"></el-input-number>
              </el-form-item>
            </div>
            <!--      -->
            <div>
              <el-form-item label="备注：" :label-width="formLabelWidth" style="width: 150px;">
                <el-input placeholder="请输入内容" type="textarea" v-model="form.desc" style="width: 240px;"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>

        <!--  按钮模块    -->
        <div v-show="addanniu"  style="margin-top: 30px ">
          <el-form :model="form">
            <!--   input菜单名称输入框   -->
            <div>
              <el-form-item label="*菜单名称：" :label-width="formLabelWidth" style="width: 150px;">
                <el-input v-model="input1"   style="width: 240px"></el-input>
              </el-form-item>
            </div>
            <!--   input接口输入框   -->
            <div>
              <el-form-item label="接口地址：" :label-width="formLabelWidth" style="width: 150px;">
                <el-input v-model="input3"   style="width: 240px"></el-input>
              </el-form-item>
            </div>
            <!--   计数器  排序   -->
            <div>
              <el-form-item label="排序：" :label-width="formLabelWidth" style="width: 150px;">
                <el-input-number v-model="num" @change="handleChange" :min="1"  style="width: 240px;"></el-input-number>
              </el-form-item>
            </div>
            <!--      -->
            <div>
              <el-form-item label="备注：" :label-width="formLabelWidth" style="width: 150px;">
                <el-input placeholder="请输入内容" type="textarea" v-model="form.desc" style="width: 240px;"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>

        <div style="height: 30px">
          <div style="float: right">
            <el-button @click="addDialog = false">取 消</el-button>
            <el-button type="primary" @click="addDialog = false">确 定</el-button>
          </div>
        </div>

      </el-dialog>
    </div>


    <!--修改弹窗-->
    <div>
      <el-dialog
        title="添加菜单"
        :visible.sync="updateDialog"
        width="30%"
        :before-close="handleClose">
        <!--   类型 及  三个单选框     -->
        <div>
          <span style="margin-right: 25px">类型：</span>
          <el-radio-group v-model="radio" >
            <!--      : label=“1”，表示label的值应为数字1     label=“1”，表示label的值应为字符串1      -->
            <el-radio :label="1"  @change="updatemuLuShow">目录</el-radio>
            <el-radio :label="2"  @change="updatecaiDanShow">菜单</el-radio>
            <el-radio :label="3"  @change="updateanNiuShow">按钮</el-radio>
          </el-radio-group>
        </div>
        <!--   根据类型不同而选择不同的模块-->
        <!--   目录模块   -->
        <div style="margin-top: 30px " v-show="updatemulu" >
          <!--    el的form表单  -->
          <el-form :model="form">
            <!--   input菜单名称输入框   -->
            <div>
              <el-form-item label="*菜单名称：" :label-width="formLabelWidth" style="width: 150px;">
                <el-input v-model="input1"   style="width: 240px"></el-input>
              </el-form-item>
            </div>
            <!--   input路由输入框   -->
            <div>
              <el-form-item label="路由地址：" :label-width="formLabelWidth" style="width: 150px;">
                <el-input v-model="input2"   style="width: 240px"></el-input>
              </el-form-item>
            </div>
            <!--   计数器  排序   -->
            <div>
              <el-form-item label="排序：" :label-width="formLabelWidth" style="width: 150px;">
                <el-input-number v-model="num" @change="handleChange" :min="1"  style="width: 240px;"></el-input-number>
              </el-form-item>
            </div>
            <!--      -->
            <div>
              <el-form-item label="备注：" :label-width="formLabelWidth" style="width: 150px;">
                <el-input placeholder="请输入内容" type="textarea" v-model="form.desc" style="width: 240px;"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>

        <!--  菜单模块    -->
        <div v-show="updatecaidan"  style="margin-top: 30px ">
          <el-form :model="form">
            <!--   input菜单名称输入框   -->
            <div>
              <el-form-item label="*菜单名称：" :label-width="formLabelWidth" style="width: 150px;">
                <el-input v-model="input1"   style="width: 240px"></el-input>
              </el-form-item>
            </div>
            <!--   input路由输入框   -->
            <div>
              <el-form-item label="路由地址：" :label-width="formLabelWidth" style="width: 150px;">
                <el-input v-model="input2"   style="width: 240px"></el-input>
              </el-form-item>
            </div>
            <!--   input接口输入框   -->
            <div>
              <el-form-item label="接口地址：" :label-width="formLabelWidth" style="width: 150px;">
                <el-input v-model="input3"   style="width: 240px"></el-input>
              </el-form-item>
            </div>
            <!--   计数器  排序   -->
            <div>
              <el-form-item label="排序：" :label-width="formLabelWidth" style="width: 150px;">
                <el-input-number v-model="num" @change="handleChange" :min="1"  style="width: 240px;"></el-input-number>
              </el-form-item>
            </div>
            <!--      -->
            <div>
              <el-form-item label="备注：" :label-width="formLabelWidth" style="width: 150px;">
                <el-input placeholder="请输入内容" type="textarea" v-model="form.desc" style="width: 240px;"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>

        <!--  按钮模块    -->
        <div v-show="updateanniu"  style="margin-top: 30px ">
          <el-form :model="form">
            <!--   input菜单名称输入框   -->
            <div>
              <el-form-item label="*菜单名称：" :label-width="formLabelWidth" style="width: 150px;">
                <el-input v-model="input1"   style="width: 240px"></el-input>
              </el-form-item>
            </div>
            <!--   input接口输入框   -->
            <div>
              <el-form-item label="接口地址：" :label-width="formLabelWidth" style="width: 150px;">
                <el-input v-model="input3"   style="width: 240px"></el-input>
              </el-form-item>
            </div>
            <!--   计数器  排序   -->
            <div>
              <el-form-item label="排序：" :label-width="formLabelWidth" style="width: 150px;">
                <el-input-number v-model="num" @change="handleChange" :min="1"  style="width: 240px;"></el-input-number>
              </el-form-item>
            </div>
            <!--      -->
            <div>
              <el-form-item label="备注：" :label-width="formLabelWidth" style="width: 150px;">
                <el-input placeholder="请输入内容" type="textarea" v-model="form.desc" style="width: 240px;"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>

        <div style="height: 30px">
          <div style="float: right">
            <el-button @click="updateDialog = false">取 消</el-button>
            <el-button type="primary" @click="updateDialog = false">确 定</el-button>
          </div>
        </div>

      </el-dialog>
    </div>


  </div>

</div>
</template>

<script>
export default {
  name: "PowerMenu",
  data(){
    return{
      addmulu:true,
      addcaidan:false,
      addanniu:false,
      updatemulu:true,
      updatecaidan:false,
      updateanniu:false,
      //添加菜单  排序的默认值
      num:1,
      //添加弹窗中单选框默认选项
      radio: 1,
      //添加弹窗
      addDialog:false,
      //修改弹窗
      updateDialog:false,
      //主页面分页  当前页
      currentPage4:3,
      input:'',
      input1:'',
      input2:'',
      input3:'',
      input4:'',
      input5:'',
      //输入框宽度
      formLabelWidth:'120px',
      //主页面表格数据
      tableData: [{
        id:'1',
        caidan:'平台管理',
        luyou:'/sdjdvxcv',
        jiekou:'',
        leixing:'目录',
        paixu:'3',
        beizhu:'撒旦发个',
        caozuo:''
      },{
        id:'2',
        caidan:'平台管理',
        luyou:'/sdjdvxcv',
        jiekou:'',
        leixing:'目录',
        paixu:'3',
        beizhu:'撒旦发个',
        caozuo:''
      }],
      //form
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },




    }
  },
  methods:{
    addmuLuShow(){
      this.addmulu=true;
      this.addcaidan=false;
      this.addanniu=false;
    },
    addcaiDanShow(){
      this.addcaidan=true;
      this.addmulu=false;
      this.addanniu=false;
    },
    addanNiuShow(){
      this.addcaidan=false;
      this.addmulu=false;
      this.addanniu=true;
    },
    updatemuLuShow(){
      this.updatemulu=true;
      this.updatecaidan=false;
      this.updateanniu=false;
    },
    updatecaiDanShow(){
      this.updatecaidan=true;
      this.updatemulu=false;
      this.updateanniu=false;
    },
    updateanNiuShow(){
      this.updatecaidan=false;
      this.updatemulu=false;
      this.updateanniu=true;
    },
    //添加弹窗的关闭方法
    handleClose(done) {
      done();
    },
    //分页方法
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //删除的提示窗
    deleteOne(){
      this.$confirm('确定要删除吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //计数器的方法
    handleChange(value) {
      console.log(value);
    },





  }
}

</script>

<style scoped>

</style>

